<template>
	<!-- tab切换列表 -->
	<view class="tab">
		<view :class="['tab-item',type=== 0 ? 'underline' :'']" @click="toggleActive(0)">
			<text>寻主</text>
		</view>
		<view :class="['tab-item',type=== 1 ? 'underline' :'']" @click="toggleActive(1)">
			<text>寻物</text>
		</view>
	</view>
	<!-- 列表 -->
	<block v-for="(item,i) in datalist" :key="i">
		<my-lose-list :losedata="item"></my-lose-list>
	</block>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		http
	} from '../../API/request.js';
	import {
		formatTime
	} from '../../utils/index.js';
	const type = ref(0)
	const datalist = ref([])
	const Text = ref('')
	const openid = uni.getStorageSync('openid')
	// 判断所点的按钮切换样式
	const toggleActive = (index) => {
		if (index === 0) {
			type.value = 0
			http.post('/getClassifyTwo', {
				type: type.value,
				classify2: Text.value
			}).then((res) => {
				const {
					data
				} = res
				datalist.value = data.map(item => {
					return {
						...item,
						time: formatTime(item.time)
					}
				})
			})
		} else if (index === 1) {
			type.value = 1
			http.post('/getClassifyTwo', {
				type: type.value,
				classify2: Text.value
			}).then((res) => {
				const {
					data
				} = res
				datalist.value = data.map(item => {
					return {
						...item,
						time: formatTime(item.time)
					}
				})
			})
		}
	}
	onLoad((options) => {
		const openid = uni.getStorageSync('openid')
		const {
			text
		} = options
		Text.value = options.text || ''
		http.post('/getClassifyTwo', {
			type: type.value,
			classify2: text
		}).then((res) => {
			const {
				data
			} = res
			datalist.value = data.map(item => {
				return {
					...item,
					time: formatTime(item.time)
				}
			})
		})
		// 设置 scrollTop 为 0 来滚动到顶部
		uni.pageScrollTo({
			scrollTop: 0, // 设置滚动到顶部
			duration: 300 // 动画时长，单位毫秒
		});
	});
	onPullDownRefresh(() => {

		datalist.value = []
		http.post('/getClassifyTwo', {
			type: type.value,
			classify2: Text.value
		}).then((res) => {
			const {
				data
			} = res
			datalist.value = data.map(item => {
				return {
					...item,
					time: formatTime(item.time)
				}
			})
		})
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 800)
	})
</script>

<style lang="less">
	.tab {
		display: flex;
		width: 100%;
		background-color: #fff;

		.tab-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx 0;

			&.underline::after {
				content: '';
				position: absolute;
				margin-top: 70rpx;
				width: 200rpx;
				height: 0;
				border: 3rpx solid skyblue;
				background-color: skyblue;
			}
		}
	}
</style>